리액트를 다루는 기술 리액트를 다루는 기술 ( Hooks ) Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다, 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미... 리액트를 다루는 기술ReactReact 리액트를 다루는 기술 ( Context API ) Context API : 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 하지만 Context API를 통하여 글로벌 상태 관리를 편하게 할 수 있다. 더 이상 여러 컴포넌트를 거쳐서 값을 전달해주는 것이 아니라, Context를 통해 원하는 값이나 함수를 바로 값을 받아와 사용할 수 있다. src/contexts/color.js src/components/ColorBox... React리액트를 다루는 기술React 3.5 state를 사용할 때 주의 사항 state 값을 바꿔야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용 해야한다. 배열이나 객체를 업데이트 할 때는 사본을 만든 뒤 그 사본에 값을 업데이트한 후 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 해야한다. 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 부모 컴포넌트의 state를 자식 컴포넌트의 pr... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 ) 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 액션 생성 함수(action creator) : 액션 객체를 만들어 주는 함수 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 리듀서(reducer) : 변화를 일으키는... React리액트를 다루는 기술React 리액트를 다루는 기술 ( 리액트 시작 ) ※ 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있다. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있나면, 리액트 컴포넌트가 최초로 샐행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 ... React리액트를 다루는 기술React 3.4 state state: 컴포넌트 내부에서 바뀔 수 있는 값 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔야 값이 변경되지만 전달받은 name 값을 직접 바꿀 수 없다. 💡 컴포넌트 state 이 constructor는 컴포넌트의 생성자 메서드이며 constructor를 작성할 때는 super(props)를 꼭 호출해야하고 이 함수가 호출되면 현재 상속받고 있는 리액트의 Comp... React리액트를 다루는 기술리액트React 정복기(9) - useState 여러 번 사용 (함수형 컴포넌트) 하나의 useState 함수는 하나의 상태 값만 관리할 수 있음 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하자! 좀더 연습해 볼까요?? 갑자기 사과가 땡겨서 아래와 같이 사과를 그냥 둘지, 먹을지 결정하는 컴포넌트를 만들어 볼께요 먼저 Apple 컴포넌트를 추가해야하니 부모인 App.js 수정 다음으로 Apple.js 파일 생성후 아래와 같이 컴포넌트 작성!... React리액트를 다루는 기술React [리액트를 다루는 기술] 3장 컴포넌트 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. MyComponent의 props 값을 요렇게 지정할 수 있다. 요렇게 const {ㅇ, ㅅ } = props 처럼 작성해주면 더 짧은 코드로 사용할 수 있으며, 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 요렇게 props를 사용할 때 파라... 리액트를 다루는 기술ReactReact [리액트를 다루는 기술] 4장 이벤트 핸들링 HTML에서 이벤트를 설정할 때는 큰 따옴표안에 실행할 코드를 넣었지만 리액트에서는 함수 형태 객체를 전달한다. 3) DOM 요소에만 이벤트를 설정할 수 있다 즉 dic, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수 없다. 네이... 리액트를 다루는 기술ReactReact ToDoList Web(3) 👍 프로젝트 최적화 방법 -> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다. 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨. 작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필요한 리렌더링을 막아야 함. 여기서 불필요한 리렌더링은 실제 유저에서의 DOM 렌더링X, Virtual DOM에서의 렌더링을... project리액트를 다루는 기술ReactReact ToDoList Web(2) (1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다. 상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다. state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용. this.props, this를 참조하지 않아도 됨. 🎁 TodoList map함수 활용 App.js에 TodoList로 todos 넘겨준 뒤, map이용하여 배치. 🎁 데이터 추가하기 App.js getId(... project리액트를 다루는 기술ReactReact 리액트를 다루는 기술 정리 (13) 다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌 사용자에게 보이는 화면은 서버 측에서 준비. 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션을 사용할 수 있다. 라우팅 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다. 리액트... react router리액트를 다루는 기술RoutelinkReactReact 리액트를 다루는 기술 ( 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ) 사용은 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수( connect )와 컴포넌트( Provider )를 사용하여 리덕스 관련 작업을 처리한다. 이 패턴은 리덕스를 사용하는 데 필수 사항은 아니지만, 이 패턴을 사용하면 코드의 재 사용성도 높아지고, 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있다. Ducks 패턴을 사용하여 액션 타입, 액션 생성 함수,... React리액트를 다루는 기술React
리액트를 다루는 기술 ( Hooks ) Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다, 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미... 리액트를 다루는 기술ReactReact 리액트를 다루는 기술 ( Context API ) Context API : 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 하지만 Context API를 통하여 글로벌 상태 관리를 편하게 할 수 있다. 더 이상 여러 컴포넌트를 거쳐서 값을 전달해주는 것이 아니라, Context를 통해 원하는 값이나 함수를 바로 값을 받아와 사용할 수 있다. src/contexts/color.js src/components/ColorBox... React리액트를 다루는 기술React 3.5 state를 사용할 때 주의 사항 state 값을 바꿔야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용 해야한다. 배열이나 객체를 업데이트 할 때는 사본을 만든 뒤 그 사본에 값을 업데이트한 후 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 해야한다. 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 부모 컴포넌트의 state를 자식 컴포넌트의 pr... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 ) 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 액션 생성 함수(action creator) : 액션 객체를 만들어 주는 함수 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 리듀서(reducer) : 변화를 일으키는... React리액트를 다루는 기술React 리액트를 다루는 기술 ( 리액트 시작 ) ※ 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있다. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있나면, 리액트 컴포넌트가 최초로 샐행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 ... React리액트를 다루는 기술React 3.4 state state: 컴포넌트 내부에서 바뀔 수 있는 값 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔야 값이 변경되지만 전달받은 name 값을 직접 바꿀 수 없다. 💡 컴포넌트 state 이 constructor는 컴포넌트의 생성자 메서드이며 constructor를 작성할 때는 super(props)를 꼭 호출해야하고 이 함수가 호출되면 현재 상속받고 있는 리액트의 Comp... React리액트를 다루는 기술리액트React 정복기(9) - useState 여러 번 사용 (함수형 컴포넌트) 하나의 useState 함수는 하나의 상태 값만 관리할 수 있음 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하자! 좀더 연습해 볼까요?? 갑자기 사과가 땡겨서 아래와 같이 사과를 그냥 둘지, 먹을지 결정하는 컴포넌트를 만들어 볼께요 먼저 Apple 컴포넌트를 추가해야하니 부모인 App.js 수정 다음으로 Apple.js 파일 생성후 아래와 같이 컴포넌트 작성!... React리액트를 다루는 기술React [리액트를 다루는 기술] 3장 컴포넌트 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. MyComponent의 props 값을 요렇게 지정할 수 있다. 요렇게 const {ㅇ, ㅅ } = props 처럼 작성해주면 더 짧은 코드로 사용할 수 있으며, 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 요렇게 props를 사용할 때 파라... 리액트를 다루는 기술ReactReact [리액트를 다루는 기술] 4장 이벤트 핸들링 HTML에서 이벤트를 설정할 때는 큰 따옴표안에 실행할 코드를 넣었지만 리액트에서는 함수 형태 객체를 전달한다. 3) DOM 요소에만 이벤트를 설정할 수 있다 즉 dic, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수 없다. 네이... 리액트를 다루는 기술ReactReact ToDoList Web(3) 👍 프로젝트 최적화 방법 -> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다. 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨. 작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필요한 리렌더링을 막아야 함. 여기서 불필요한 리렌더링은 실제 유저에서의 DOM 렌더링X, Virtual DOM에서의 렌더링을... project리액트를 다루는 기술ReactReact ToDoList Web(2) (1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다. 상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다. state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용. this.props, this를 참조하지 않아도 됨. 🎁 TodoList map함수 활용 App.js에 TodoList로 todos 넘겨준 뒤, map이용하여 배치. 🎁 데이터 추가하기 App.js getId(... project리액트를 다루는 기술ReactReact 리액트를 다루는 기술 정리 (13) 다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌 사용자에게 보이는 화면은 서버 측에서 준비. 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션을 사용할 수 있다. 라우팅 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다. 리액트... react router리액트를 다루는 기술RoutelinkReactReact 리액트를 다루는 기술 ( 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ) 사용은 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수( connect )와 컴포넌트( Provider )를 사용하여 리덕스 관련 작업을 처리한다. 이 패턴은 리덕스를 사용하는 데 필수 사항은 아니지만, 이 패턴을 사용하면 코드의 재 사용성도 높아지고, 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있다. Ducks 패턴을 사용하여 액션 타입, 액션 생성 함수,... React리액트를 다루는 기술React